<template>
	<view>
		<view class="wrap">
			<!-- <view class="heder">
				 <text>logo</text>
				<text>颐养中心</text> -->
			<!-- <image src="../../static/image/sousuo-4@2x.png"></image> -->
			<!-- </view> -->
			<view class="notice" @click="careTo()">
				<image src="../../static/image/daiban@2x.png"></image>
				<text>待办事项：有{{quantityTotal}}个代办事项</text>
			</view>
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :autoplay="true" :interval="3000" indicator-dots :duration="800">
					<swiper-item class="swiper-item">
						<image src="../../static/image/banner@2x.png" mode=""></image>
					</swiper-item>
					<swiper-item class="swiper-item">
						<image src="../../static/image/banner2@2x.png" mode=""></image>
					</swiper-item>
					<swiper-item class="swiper-item">
						<image src="../../static/image/banner3.png" mode=""></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="main-bom">
				<!-- <view class="main-bom"> -->
				<view class="main-nav">
					<text>其他功能</text>
					<image src="/static/image/Customize Button@2x.png"></image>
				</view>
				<view class="bom-main-content">
					<view class="bom-item" @click="scanCodeTo(item)" v-for="(item,index) in nodekeyArr" :key="index">
						<!-- <image src="/static/image/saoyisao.png"></image></br> -->
						<image :src="item.imgUrl"></image></br>
						<text>{{item.nodeName}}</text></br>
					</view>
					<view class="bom-empty-item"></view>
					<view class="bom-empty-item"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nodekeyArr: [],
				nodeKey: '',
				nodeName: '',
				url: '',
				imgUrl: '',
				worker: '',
				total: 0,
				testJson: {},
				timeout: 30000, // 30S
				timeoutObj: null,
				id: '',
				quantityTotal:0,//待办数量
			}
		},
		//隐藏页面执行
		onHide() {
			// uni.onSocketClose(function (res) {
			//   console.log('WebSocket 已关闭！');
			// });
		},
		onLoad() {
			
		},
		onShow() {
			this.getNodeKey()
			this.getUser()
			this.toDoQuantity()
			this.onSocketMessage()
		},
		//上拉刷新
		onPullDownRefresh() {
			//开启刷新
			uni.startPullDownRefresh();
			//加载列表
			this.getUser()
			this.toDoQuantity()
			this.onSocketMessage()
			//关闭刷新
			uni.stopPullDownRefresh();
		},
		methods: {
					async toDoQuantity(){
				const res = await this.$myRequest({
					url: '/api-portal/pendingItem/',
					method: "get",
					data: {
					}
				})
				if (res.success == true) {
					this.quantityTotal = res.body.statusCountMap.total
					// console.log(res.body.statusCountMap.total)
				}
			},
			async getSubscript() {
				const res = await this.$myRequest({
					url: '/api-msg/messages/',
					method: "get",
					data: {
						isReaded: 0,
					}
				})
				if (res.success == true) {
					this.total = res.data.totalSize
					var quantity
					if (this.total == 0) {
						uni.removeTabBarBadge({
							index: 1,
						})
					} else if (this.total >= 99) {
						quantity = "99+"
					} else {
						quantity = this.total
						quantity = quantity.toString()
					}
					uni.setTabBarBadge({
						index: 1,
						text: quantity,
					})
				}
			},
			async getUser() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-portal/currentUser'
					})
				if (res.success == false) { //如果读取信息成功
					uni.removeTabBarBadge({
						index: 1,
					})
				} else if (res.success == true) {
					this.id = res.body.currentUser.id;
					this.checkopenSocket()
					this.getSubscript()
				}
			},

			scanCodeTo(item) {
				uni.navigateTo({
					url: item.url
				})
			},
			careTo() {
				uni.navigateTo({
					url: "/pages/agency/index"
				})
			},
			getNodeKey() {
				this.worker = uni.getStorageSync('worker')
				console.log("worker", this.worker)
				if (this.worker == "工作人员app") {
					this.nodekeyArr = uni.getStorageSync('nodekeyArr')
					// console.log("nodeKey", this.nodekeyArr)
					// console.log(JSON.stringify(this.nodekeyArr))
					for (let i = 0; i < this.nodekeyArr.length; i++) {
						this.nodeKey = this.nodekeyArr[i].nodeKey
						this.nodeName = this.nodekeyArr[i].nodeName
						this.url = this.nodekeyArr[i].url
						this.imgUrl = this.nodekeyArr[i].imgUrl
					}
				}
			},
			//通知推送
			//判断是否已连接
			checkopenSocket() {
				uni.sendSocketMessage({
					data: "ping",
					success: res => {
						return
					},
					fail: err => {
						this.socket()
					}
				});
			},
			//打开连接
			socket() {
				uni.connectSocket({
					url: 'ws://pm.gxtimeloit.com:10034/websocket/' + this.id + '/all', 
					// url: 'ws://pension.bcjkcloud.com:8088/websocket/' + this.id + '/all',
					// url: 'ws://icewould.tpddns.cn:18123',
					success: data => {
						console.log(data)
					}
				});
				// this.js()

			},
			//	打开成功监听服务器返回的消息
			onSocketMessage() {
				// 消息
				uni.onSocketMessage(res => {
					const data = JSON.parse(res.data)
					// console.log(data)
					if (data.code == "99") {
						if (data.hasOwnProperty("msg")) {
						if (data.msg != 'ping') {
					getApp().globalData.getSocketMsg(res.data);
					this.getSubscript()
					this.toDoQuantity()
					}
					}
					}
				});
			},
		}
	}
</script>

<style>
	@font-face {
		font-family: 'ppf';
		src: url('/static/font/pf.ttf');
	}

	* {
		margin: 0rpx;
		padding: 0rpx;
		font-family: 'ppf';
		word-spacing: 10rpx;
	}

	.notice {
		height: 80rpx;
		width: 97%;
		background-color: #ffffff;
		margin-top: 20rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
		margin-bottom: 20rpx;
		border-radius: 15rpx;
		box-shadow: 7rpx 7rpx 3rpx #c5c6c9;

	}

	.notice image {
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding: 0rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.notice text {
		position: absolute;
		margin-top: 20rpx;
		padding: 0rpx;
		font-size: 28rpx;
		color: #666666;

	}

	.main-top {
		height: 350rpx;
		width: 97%;
		background-color: #ffffff;
		margin-bottom: 20rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.main-nav {
		height: 60rpx;
		width: 97%;
		background-color: #ffffff;
		border-bottom: 1rpx #ececec solid;
	}

	.main-nav text {
		font-size: 28rpx;
		color: #aeaeae;
		position: absolute;
		margin-top: 13rpx;
		margin-left: 30rpx;
		padding: 0rpx;
	}

	.main-nav image {
		float: right;
		margin-top: 20rpx;
		margin-right: 10rpx;
		padding: 0rpx;
		width: 28rpx;
		height: 20rpx;
	}

	/* .main-nav::after{
		content: "→";
	} */

	.main-content {
		display: flex;
		flex-direction: row;
	}

	.top-item {
		/* display: flex; */
		margin-top: 30rpx;
		margin-left: 15rpx;
		margin-right: 10rpx;
		height: 220rpx;
		width: 220rpx;
		background-color: #ffffff;
		text-align: center;
		/* justify-content: center; */
	}

	.top-item image {
		width: 222rpx;
		height: 150rpx;
	}

	.top-item text {
		font-size: 26rpx;
	}

	.main-bom {
		width: 97%;
		/* height: calc(40vh); */
		margin-left: 10rpx;
		margin-right: 10rpx;
		background-color: #ffffff;
		padding-bottom: 4%;
		padding-bottom: 2%;
	}

	.bom-main-content {
		display: flex;
		flex-wrap: wrap;
		/* flex-direction: row; */
		text-align: center;
		margin-bottom: 3%;
		justify-content: flex-start;
		flex-direction: row;
	}
	
	.bom-empty-item {
		cursor: pointer;
		flex: 1;
		min-width: 133rpx;
		min-height: 90rpx;
		margin-top: 35rpx;
		margin-bottom: 35rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
	}
	
	.bom-item {
		cursor: pointer;
		flex: 1;
		min-width: 133rpx;
		min-height: 90rpx;
		margin-top: 35rpx;
		margin-bottom: 35rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
	}

	.bom-item image {
		width: 85rpx;
		height: 85rpx;
		justify-content: center;
	}

	.bom-item text {
		font-size: 26rpx;
	}

	page {
		background-color: #ebeff6;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.swiper {
		width: 750rpx;
		height: 417rpx;
		margin-bottom: 20rpx;
	}

	.swiper-item {
		width: 750rpx;
		height: 417rpx;
	}

	.swiper-item image {
		height: 100%;
		width: 100%;
	}
</style>

